<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>LOMP Interface</title>
	
	<script src="http://www.google.com/jsapi"></script>
	<script>
		google.load("jquery", "1.3.2");
		google.load("jqueryui", "1.7.1");
	</script>
	<script src="json2.js"></script>
	
	<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
	<script src="lomp.js"></script>
	
	<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
	<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
	
	<script>
		lomp = new LOMP ( "127.0.0.1:5667" );
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			jQuery("#list").jqGrid({
				datatype: 'clientSide',
				colNames:['Id','Artist','Title','Album','Date','Source'],
				colModel :[ 
					{name:'id',index:'id', width:35, sorttype:'int'}, 
					{name:'artist',index:'artist', width:200, sorttype:'text'}, 
					{name:'title',index:'title', width:200, sorttype:'text'}, 
					{name:'album',index:'album', width:200, sorttype:'text'}, 
					{name:'date',index:'date', width:50, sorttype:'date'},
					{name:'source',index:'source', width:400, sorttype:'text'},
				],
				pager: jQuery('#pager'),
				rowNum:10,
				viewrecords: true,
				imgpath: 'themes/basic/images',
				caption: 'Playlist'
			});
		} );
		grid = function(){ 
			jQuery("#list").clearGridData();
			var currentplaylist = 0;
			var playlist = lomp.state.playlists [ currentplaylist ]
			for ( var id = 0 ; id < playlist.length ; id++ ) {
				var item = playlist [ id ]
				jQuery("#list").addRowData ( id + 1 , {
					id: id + 1 ,
					source: item.source ,
					artist: ( item.details.tags.artist || [ ] ) [ 0 ],
					title: ( item.details.tags.title || [ ] ) [ 0 ],
					album: ( item.details.tags.album || [ ] ) [ 0 ],
					date: ( item.details.tags.date || [ ] ) [ 0 ],
				} ); 
			};
			//console.log("grid")
		};
		
		lomp.addcallback ( [ "playlists" , 0 ] , grid );
		lomp.refresh();
	</script>
</head>
	<body>
		<!--div class="playlistlist"></div-->
		<table id="list" class="scroll"></table> 
		<div id="pager" class="scroll" style="text-align:center;"></div> 
	</body>
</html>
